<!--模板-->
<template>
  <div id="home">
    <!--
    {{msg}}
    <users></users>
    <h1>{{info}}</h1>
    -->
    <app-header v-on:descChange="updateDesc($event)" v-bind:desc="desc"></app-header>
    <users v-bind:msg="msg"></users>
    <users v-bind:msg="msg"></users>
    <app-footer v-bind:desc="desc"></app-footer>

  </div>
</template>


<!--业务逻辑-->
<script>
  //一般是使用局部注册组件(这种方式不用)
  import Users from './Users'
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'home',
    data() {
      return {
        desc: "这是我的第一个vue脚手架项目",
        info: "App.vue--------->",
        msg: [
          {name: 'xuxu', desc: 'jimi', show: false},
          {name: 'xuxu', desc: 'jimi', show: false},
          {name: 'xuxu', desc: 'jimi', show: false},
          {name: 'xuxu', desc: 'jimi', show: false},
          {name: 'xuxu', desc: 'jimi', show: false}
        ]
      }
    },
    methods: {
      updateDesc(desc){
        this.desc = desc;
      }
    },
    components: {
      'users': Users,
      'app-header': Header,
      'app-footer': Footer,
    }
  }
</script>

<!--样式 scoped 是各自的域，相同的标签样式不会覆盖-->
<style scoped>
  h1 {
    color: #193feb;
  }
</style>
